<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Pragma" contect="no-cache">
    <title>News</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <style type="text/css">
    	#newdlg ul{
			padding: 0;
		}
    	#newdlg li{
    		list-style: none;
    		font-size: 24px;
    		padding: 5px 0;
    		border: 1px solid aqua;
    		margin-bottom: 5px;
    	}
    </style>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:60px">
        	<a href="#" id="loadAllDataBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">所有新闻</a>
            <a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新闻</a>
            <a href="#" id="removeBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
             <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:380px;height:32px;">
        </div>
        <div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
            <ul id="tt"></ul>
        </div>
 
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>
            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:360px;padding:10px">
		        <form id="ff" method="post" >
		        	<div style="margin-bottom:20px">
		                <input class="easyui-textbox" name="_id">
		            </div>
		            <div style="margin-bottom:20px">
		                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题:',required:true">
		            </div>
		            <div style="margin-bottom:20px">
		                <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者:',required:true">
		            </div>
		         
		            <div style="margin-bottom:20px">
		                <input class="easyui-textbox" name="desc" style="width:100%;height:60px" data-options="label:'新闻内容:',multiline:true">
		            </div>		            
        		</form>
        		<div style="text-align:center;padding:5px 0">
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
		        </div>
		    </div>
		    
        </div>
    </div>
 <div id="newdlg" class="easyui-dialog" title="新闻详情" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:360px;padding:10px">		        
	<ul>
        <li class="news-title"></li>
        <li value="AK" class="news-author"></li>
        <li value="AZ" class="news-desc"></li>
        <li value="AR" class="news-date"></li>
     </ul>
</div>
<script>
	var cateId=null;
	//分类
    $('#tt').tree({
        url: "http://localhost:3000/cate/list/0",
        method:'get',
        onClick: function(node){
			cateId=node._id;
			console.log(cateId);
			$('#dg').datagrid({
				queryParams: {
					cateId:cateId
				},
			}).datagrid('reload');			
			
		}
    });
    
    
  //表格
	$('#dg').datagrid({
	    url:'http://localhost:3000/news/list',
	    method:'post',
	    queryParams: {
			cateId:cateId	
		},
	    fit:true,
	    pagination:true,
	    pageSize:5,
	    pageList:[5,10,15,20,25,30],
	    columns:[[
	    	{field:'ck',title:'复选',checkbox:true},
	        {field:'title',title:'新闻标题',width:100},
	        {field:'author',title:'新闻作者',width:100},
	        {field:'date',title:'发布时间',width:150},
	        {field:'operate',title:'操作', width:80,
				formatter: function(value,row,index){
					return "<a onclick=deleteData('"+row._id+"')>删除</a> <a onclick=editData('"+row._id+"')>修改</a>"
				}
		},
	        {field:'see',title:'详情', width:80,
				formatter: function(value,row,index){
					return "<a onclick=seeData('"+row._id+"')>查看</a>"
				}
			}
	    ]]
	});
	//判断提示
	$('#addBtn').click(function() {
		$('#ff').form('clear');
		if (cateId===null) {
			$.messager.show({
                title:'信息提示',
                msg:'请选择分类，否则无法添加新闻',
                timeout:3000,
                showType:'show'
            });
		}else{
			$('#dlg').dialog('open')			
		}
	});
	//添加修改
	function submitForm(){
//		console.log($('#ff').form('enableValidation').form('validate'))
		var postData=$('#ff').serializeJSON();
		postData.cateId=cateId;		
//		console.log(postData);
		
		if (postData._id.length>0) {
//			console.log(postData._id);
			delete postData.cateId;
//			console.log(postData);
			//edit
			$.ajax({
				type:"put",
				url:"http://localhost:3000/news/data/"+postData._id,
				data:postData,
				async:true
			}).done(function(res) {
//				console.log(postData);
				$.messager.show({
	                title:'信息提示',
	                msg:'数据修改成功',
	                timeout:3000,
	                showType:'show'
	            });
	            $('#dlg').dialog('close');
	            $('#dg').datagrid('reload');
	            
			})
		} else{
			//add
			delete postData._id;
			$.ajax({
				type:"post",
				url:"http://localhost:3000/news/data",
				data:postData,
				async:true
			}).done(function(res) {
				$.messager.show({
	                title:'信息提示',
	                msg:'数据添加成功',
	                timeout:3000,
	                showType:'show'
	            });
	            $('#dlg').dialog('close');
	            $('#dg').datagrid('reload');

			})
		}
		
		
    }

    function clearForm(){
        $('#ff').form('clear');
    }
    //删除
    function deleteData(id){
    	
    	$.messager.confirm('确认删除', '你确定要执行此操作吗？', function(r){
            if (r){
                $.ajax({
		    		type:"delete",
		    		url:"http://localhost:3000/news/data/"+id,
		    		async:true
		    	}).done(function(res){
		    		$('#dg').datagrid('reload');
		    		
		    	})
            }
        });    	
    }
    //添加
    function editData(id){
    	$.ajax({
    		type:"get",
    		url:"http://localhost:3000/news/data/"+id,
    		async:true
    	}).done(function (res) {
    		$('#ff').form('load', res);
    		$('#dlg').dialog('open');
    	})  	
    }
    //删除多个
    $('#removeBtn').click(function() {
    	var rows=$('#dg').datagrid('getSelections');
//  	console.log(rows);
		if (rows.length>0) {
			var ids=[];
			rows.forEach(function(item,idx){
//				console.log(item._id)
				ids.push(item._id);
			})
			
//			console.log(ids);
			$.messager.confirm('确认删除', '你确定要执行此操作吗？', function(r){
	            if (r){
					$.ajax({
						type:"post",
						url:"http://localhost:3000/news/data/removes",
						data:{
							ids:ids.toString()
						},
						async:true
					}).done(function(res){
						$('#dg').datagrid('reload');
						
					})
				}
	        });
       }
    })
    //查询
    function doSearch(value){
        $('#dg').datagrid({
			queryParams: {
				cateId:cateId,
				title:value,
			},
		}).datagrid('reload');
    }
     //所有刷新
     $('#loadAllDataBtn').click(function(){
     	cateId=null;
     	$('#dg').datagrid({
			queryParams: {
				cateId:cateId
			},
		}).datagrid('reload');
     })
     
    function seeData(id){    	
    	$.ajax({
    		type:"get",
    		url:"http://localhost:3000/news/data/"+id,
    		async:true
    	}).done(function (res) {
    		$('#newdlg').dialog('open');
//  		console.log(res.title);
    		$('.news-title').html('标题:'+res.title);
    		$('.news-author').html('作者:'+res.author);
    		$('.news-date').html('时间:'+res.date);
    		$('.news-desc').html('内容:'+res.desc);
    	})  	
    }
</script>

</body>
</html>





















